<template>
  <div id="bg">
    <p style="margin-left: 5%;margin-top:4%">基本信息</p>
    <div id="mg" style="width: 900px ;text-align: left; margin-left: 20%">
      <p>用户id:{{userList.userId}}</p>
      <p>角色id:{{userList.roleId}}</p>
      <p>经销商：{{userList.dealerId}}</p>
      <p>公司名称：{{userList.companyName}}</p>
      <p>公司简介：{{userList.companyIntro}}</p>
      <p>公司地址：{{userList.companyAddress}}</p>
      <p>开户日期：{{userList.status}}</p>
      <p>银行账户：{{userList.bankAccount}}</p>
      <p>账户余额：{{userList.bankBalance}}</p>
      <p>代理产品：{{userList.agencyProduct}}</p>
      <p>邮寄地址：{{userList.emailAddress}}</p>

    </div>
    <p style="margin-left: 5%;margin-top:4%">联系方式</p>
    <div id="xian"></div>
    <div id="mgtwo" style="width: 900px;text-align: left; margin-left: 20%">
      <p>联系人：{{userList.contactMan}}</p>
      <p>固定电话：{{userList.fixedPhone}}</p>
      <p>手机:{{userList.mobilePhone}}</p>
      <p>传真：{{userList.fax}}</p>
      <p>邮寄地址：{{userList.emailAddress}}</p>
      <p>备注：{{userList.remark}}</p>
    </div>
    <el-button type="danger" @click="edita" style="margin-left:70%">修改</el-button>
    <el-dialog
      style="height: 100%;"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <p>用户id:
        <el-input v-model="inputf" placeholder="" style="width: 300px; margin-left: 43px">{{b.userId}}</el-input>
      </p>
      <p>角色id:
        <el-input v-model="inputg" placeholder="" style="width: 300px; margin-left: 43px">{{b.roleId}}</el-input>
      </p>
      <p>经销商id:
        <el-input v-model="input" placeholder="" style="width: 300px; margin-left: 30px">{{b.dealerId}}</el-input>
      </p>
      <p>联系人:
        <el-input v-model="inputh" placeholder="" style="width: 300px; margin-left: 40px">{{b.contactMan}}</el-input>
      </p>
      <p>代理产品:
        <el-input v-model="inputb" placeholder="" style="width: 300px; margin-left: 25px">{{b.agencyProduct}}</el-input>
      </p>
      <p>手机:
        <el-input v-model="inputa" placeholder="" style="width: 300px; margin-left: 55px">{{b.mobilePhone}}</el-input>
      </p>
      <p>银行账户:
        <el-input v-model="inputc" placeholder="" style="width: 300px; margin-left: 25px">{{b.bankAccount}}</el-input>
      </p>
      <p>邮寄地址:
        <el-input v-model="inputd" placeholder="" style="width: 300px; margin-left: 25px">{{b.emailAddress}}</el-input>
      </p>
      <p>公司名称:
        <el-input v-model="inputi" placeholder="" style="width: 300px; margin-left: 25px">{{b.companyName}}</el-input>
      </p>
      <p>公司简介:
        <el-input v-model="inputj" placeholder="" style="width: 300px; margin-left: 25px">{{b.companyIntro}}</el-input>
      </p>
      <p>公司地址:
        <el-input v-model="inpute" placeholder="" style="width: 300px; margin-left: 25px">{{b.companyAddress}}
        </el-input>
      </p>
      <p slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'personalinformation',
  data () {
    return {
      input: '',
      inputa: '',
      inputb: '',
      inputc: '',
      inputd: '',
      inpute: '',
      inputh: '',
      inputf: '',
      inputg: '',
      inputi: '',
      inputj: '',
      a: [],
      dialogVisible: false,
      userList: [],
      b: []
    }
  },
  methods: {
    edita () {
      this.dialogVisible = true
      this.b = this.userList
    },
    edit () {
      this.dialogVisible = false
      this.$axios.post('user/editUserInfo', {
        contactMan: this.b.contactMan,
        agencyProduct: this.b.agencyProduct,
        mobilePhone: this.b.mobilePhone,
        bankAccount: this.b.bankAccount,
        emailAddress: this.emailAddress,
        companyAddress: this.b.companyAddress,
        userId: this.b.userId,
        roleId: this.b.roleId = 1,
        dealerId: this.b.dealerId,
        companyIntro: this.b.companyIntro,
        companyName: this.b.companyName
      }).then(
        res => {
          this.$axios.post('user/queryUserInfo', { userId: this.myUserId })
            .then((response) => {
              this.a = response
              window.console.log(response)
              this.userList = response.data.data
            })
            .catch(function (error) {
              window.console.log(error)
            })
          window.console.log(res)
        }
      ).catch(err => (err))
    },
    handleClose (done) {
      this.$confirm('确认关闭?')
        .then(() => {
          done()
        })
        .catch(() => {
        })
    }
  },
  computed: {
    myUserId () {
      console.log('userid' + this.$store.getters.getUserInfo.userId)
      return this.$store.getters.getUserInfo.userId
    }
  },
  created: function () {
    this.a = Object.assign(this.$store.getters.getUserInfo, this.$store.getters.company)
    this.userList = Object.assign(this.$store.getters.getUserInfo, this.$store.getters.company)
    this.contactMan = this.a.data.data.contactMan
  }
}
</script>

<style>
#mg {
  /*border: 1px solid red;*/
  /*margin: 80px auto;*/
  text-align: center;
}

#xian {
  border-bottom: 1px solid black;
  margin: 0 5%;
}
#mgtwo {
  /*border: 1px solid red;*/
  margin-top: 20px;
  text-align: center;
}
</style>
